<template>
<div class="container-wrapper">
    <el-container>
        <el-main>
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24" class="primary">平台研发看板</el-col>
            </el-row>
            <div class="back" v-if="Array.isArray(tableData) && tableData.length">
                <span class="span">模块统计</span>
            <el-table
                :data="tableData.length > 10 ? tableData.slice((platDefectCurrent-1)*platDefectSize, platDefectCurrent*platDefectSize) : tableData"
                border
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"             
                :header-cell-style="{background:'#eef1f6'}"
                style="width: 100%">
                <el-table-column
                    prop="module_name"
                    label="模块名称"
                    sortable
                    width="180"
                    >
                </el-table-column>
                <el-table-column
                    prop="git_name"
                    label="git仓库"
                    width="430">
                </el-table-column>
                <el-table-column
                    prop="modify_codelines"
                    label="代码修改行数 (行)"
                    align="center"
                    :formatter="formatter">
                </el-table-column>
                <el-table-column
                    prop="bug_num"
                    label="缺陷总数 (个)"
                    align="center"
                    :formatter="formatter">
                </el-table-column>
                <el-table-column
                    prop="bug_rate"
                    label="缺陷密度 (个/KLOC)"
                    align="center"
                    :formatter="formatter">
                </el-table-column>
                <el-table-column label="缺陷根因分析">
                    <el-table-column label="需求分析">
                        <el-table-column                           
                            label="个数(个)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.requirement_pass_count > 0}">
                                    {{ scope.row.requirement_pass_count > 0 ? scope.row.requirement_pass_count : '' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="占比(%)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.requirement_pass_rate > 0}">
                                    {{ scope.row.requirement_pass_rate > 0 ? scope.row.requirement_pass_rate : '' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="详细设计">
                        <el-table-column
                            label="个数(个)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.design_pass_count > 0}">
                                    {{ scope.row.design_pass_count > 0 ? scope.row.design_pass_count : '' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="占比(%)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.design_pass_rate > 0}">
                                    {{ scope.row.design_pass_rate > 0 ? scope.row.design_pass_rate : '' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="代码实现">
                        <el-table-column
                            label="个数(个)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.code_implement_pass_count > 0}">
                                    {{ scope.row.code_implement_pass_count > 0 ? scope.row.code_implement_pass_count : '' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="占比(%)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.code_implement_pass_rate > 0}">
                                    {{ scope.row.code_implement_pass_rate > 0 ? scope.row.code_implement_pass_rate : '' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="其他">
                        <el-table-column
                            label="个数(个)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.other_count > 0}">
                                    {{ scope.row.other_count > 0 ? scope.row.other_count : '' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="占比(%)"
                            align="center">
                            <template slot-scope="scope">
                                <div :class="{'red': scope.row.other_count_rate > 0}">
                                    {{ scope.row.other_count_rate > 0 ? scope.row.other_count_rate : '' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination class="marT"
                v-show="totalnum > 10"
                :page-size="platDefectSize"                                                      
                @size-change="platDefectSizeChange"
                @current-change="platDefectCurrentChange"
                :current-page="platDefectCurrent"                               
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalnum">
            </el-pagination>
        </div>
        </el-main>
    </el-container>
</div>   
</template>

<script>
import http from '@/views/sys/axios'

export default {
    created() {
        this.getdata()
    },
    data () {
        return {
            tableData: [],
            totalnum: 0,
            platDefectSize: 10,
            platDefectCurrent: 1,
            class_style: '',
        }
    },
    methods: {
        getdataPro(){
            return http.get(`/api/manifest/platdefectstatic`)
        },
        async getdata() {
            try{
                const { data, total_num } = await this.getdataPro()
                this.tableData = data;
                this.totalnum = total_num;
            } catch(err) {
                throw err
            }
        },
        platDefectCurrentChange(val) {
            this.platDefectCurrent = val
        },
        platDefectSizeChange(val) {
            this.platDefectSize = val
        },
        formatter(row, column, cellValue) {
            if (cellValue == 0){
                return ''
            }

            return cellValue;
        },
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/common/common.scss';
    /deep/ .el-table th.gutter{
        display: table-cell!important;
    }
    .col-form-label {
        padding-top: calc(.375rem + 1px);
        padding-bottom: calc(.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }
    .mr-1{
        margin-right: .25rem;
    }
    /deep/ .el-table--border th {
        text-align: center;
    }
    .back {
        background: #fff;
        padding: 10px;
        margin: 10px 0;
    }
    // .bug{
    //     background-color: #fff;
    //     padding: 10px;
    //     margin: 10px 0 0 0;
    //     // border: 1.5px solid #fff;
    // }
    .span {
        font-size: 17px;
        margin: 10px 0;
        display: block;
        color: rgb(87, 90, 94);
    }
    .red{
        color: #e4393c;
    }
    .marT{
        margin-top: 20px;
    }
    /deep/ .tag-wrapper .wrapper-in {
        background-color: rgb(238, 241, 246);
    }
    .container-wrapper{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;    
        .border{
            box-sizing: content-box;
            height: 0;
            overflow: visible;
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0,0,0,.1);
        }
        .primary{
            color: #409EFF;
            font-size: 30px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 400;
        }
        .m-b{            
            .mr-2, .mx-2 {
                margin-right: .5rem!important;
            }
            label {
                display: inline-block;
                margin-bottom: .5rem;
            }
            .mr-1, .mx-1 {
                margin-right: .25rem!important;
            }
            .col-form-label {
                padding-top: calc(.375rem + 1px);
                padding-bottom: calc(.375rem + 1px);
                margin-bottom: 0;
                font-size: inherit;
                line-height: 1.5;
            }
            .mr-4, .mx-4 {
                margin-right: 1.5rem!important;
            }
            .mr-1, .mx-1 {
                margin-right: .25rem!important;
            }         
        }
        label {
            display: inline-block;
            margin-bottom: .5rem;
        }       
        .label {
            background-color: #d1dade;
            color: #5e5e5e;
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 600;
            padding: 3px 8px;
            text-shadow: none;
            border-radius: 0.25em;
            line-height: 1;
            white-space: nowrap;
        }
   }     
</style>